<template>
    <uni-popup ref="popup" type="bottom" :safe-area='false'>
        <view class="content">

            <view class="headBox">

                <text>选择收货地址</text>

                <view class="close" @click.stop="closeBox">
                    <text class=" iconfont">&#xeca0;</text>
                </view>
               

            </view>

            <view class="addr-content">

                <scroll-view class="fixed-head-scroll" :scroll-y="true" :show-scrollbar="false" scroll-with-animation>

                    <view v-for="item,idx in listArr" class="i-box" :key="item.id" :item="item" :data_transit="{ index: idx, item: item }">
                        <view class="item" @click="chooseOne(item)">
                            <view class="name">
                                <text class="tag full" v-if="item.isDefault">默认</text><text class="big mr5"> {{ item.location }} {{ item.houseNumber }}</text>
                                <!-- {{ item.deliveryAddress }} {{ item.houseNumber }} -->
                            </view>
                            <view class="concat">
                                {{ item.contacts }} ({{ item.sex ==1 ? '先生' : '女士' }}) <text class="ml10">{{ item.contactsPhone }}</text> <text class="tag  ml10" v-if="item.labelStr">{{item.labelStr  }}</text>
                            </view>

                            <view class="right" @click.stop="goEdit(item )">

                                <text class="iconfont icon-xiugai1"></text>

                            </view>
                        </view>
                    </view>
                </scroll-view>


            </view>

            <view class="foot">
                <view class="likeBtn" @click="goAdd">
                    <text class="iconfont big">&#xe8c0;</text> <text> 新增地址</text>
                </view>

            </view>

        </view>
    </uni-popup>
</template>
<script>
const app = getApp();
import uniPopup from '@/components/uni-popup/uni-popup/uni-popup'
export default {
    props: {
        text: {
            type: String,
            default: '暂无~~',
        }
    },
    data () {
        return {
            listArr: [],
            total:0,
            tagArr: [{ id: '1', name: "家" }, { id: '2', name: "公司" }, { id: '3', name: "学校" }],
        }
    },
    components: { uniPopup },

    mounted (option) {


    },
    methods: {
        openFunc () {
            this.$refs['popup'].open()
            this.getData()
        },
        closeBox(){
            this.$refs['popup'].close()
        },
       getData () {

            this.$axios({
                url: "flash/supermarket/user/address/page/list?loading", data: {
                    "pageNum": 1,
                    "pageSize": 100,
                }
            })
                .then(res => {

                    this.listArr = res.data.map(item => {

                        item.labelStr = item.label ? this.tagArr.find(i => i.id == item.label)?.name : ''

                        return item

                    })

                    this.total = res.total

                })
        },

        //去修改
        goEdit (item) {
            this.closeBox()
            this.$goNext('/pages/center/address/edit?tag=buy&id=' + item.id)
        },
        goAdd () {
            this.closeBox()
            this.$goNext('/pages/center/address/edit?tag=buy')
        },
        //删除
        delItem( row ){
        
        },
        //选择这个
        chooseOne( row ){

            this.$emit('finish',row.id)

            this.closeBox()
        }
    },
    beforeDestroy () {


    }
}
</script>
<style scoped lang="scss">
$heightSize: 50rpx;
.content{
    background: #fff;
    border-radius: 26rpx 26rpx 0 0 ;
}
.headBox{
    position: relative;
    padding: 30rpx 40rpx 32rpx; 
    font-size: 34rpx;
    color: #000;
    line-height: 1.1;
    text-align: center;
    font-weight: bold;
    .close{
        position: absolute;
        right: 0;
        top: 0;
        width: 100rpx;
        text-align: center;
        padding: 30rpx;
        color: #777;
        font-size: 34rpx;
        z-index: 1;
    }
}
.addr-content {
    padding: 4rpx 0rpx 4rpx;
    height: 50vh;
    .fixed-head-scroll{
        height: 100%;
    }
    .i-box:last-child{
        .item{
            border-color: transparent;
        }
    }
    .item {
        position: relative;
        padding: 26rpx;
        padding-right: 80rpx;
        border-bottom: 1rpx solid #f1f1f1;
        white-space: normal;
        .name {
            font-size: 26rpx;
            line-height: 1.5;

            .big {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
            }
        }
        .concat {
            font-size: 26rpx;
            margin-top: 4rpx;
            color: #888;
        }
        .tag {
            display: inline-block;
            padding: 2rpx 10rpx;
            border-radius: 3px;
            line-height: 1.2;
            font-size: 28rpx;
            margin-right: 16rpx;
            border: 1px solid #9672f7;
            color: #9672f7;
            // border-color: #9672f7;
            transform: scale(0.8);
            &.full {
                color: #1287fa;
                background: #e6f7ff;
                border-color: #e6f7ff;
            }
        }
        .right {
            position: absolute;
            right: 0rpx;
            width: 100rpx;
            text-align: center;
            top: 0;
            z-index: 4;
            padding-top: 50rpx;
            color: #777;
            font-size: 36rpx;
        }
    }
}
.foot {
    // position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 15rpx 0 20rpx;
   
    background: #fff;
    z-index: 2;
    box-shadow: 0 1px 10px #eaeaea;
    .likeBtn {
        font-size: 38rpx;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff2d46;
        .big {
            font-size: 50rpx;
            margin-right: 10rpx;
        }
    }
}
</style>